<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 动物分类数据
const categories = ref([
  { id: 'cute', name: '超萌宠物', icon: '🐶🐱', color: '#FF9EAA' },
  { id: 'wild', name: '野生动物', icon: '🦁🐯', color: '#FFD77C' },
  { id: 'marine', name: '海洋生物', icon: '🐬🐠', color: '#8AC4D0' },
  { id: 'birds', name: '可爱鸟类', icon: '🐦🦜', color: '#B8E1FF' },
  { id: 'exotic', name: '珍稀动物', icon: '🐼🐨', color: '#A8D8EA' }
])

// 推荐动物数据
const featuredAnimals = ref([
  { id: 1, name: '大熊猫', category: 'exotic', image: 'https://img95.699pic.com/photo/50644/6272.jpg_wh860.jpg', description: '中国国宝，憨态可掬的大熊猫' },
  { id: 2, name: '金毛犬', category: 'cute', image: 'https://img95.699pic.com/photo/60045/5295.jpg_wh860.jpg', description: '温顺友好的家庭宠物' },
  { id: 102, name: '小奶猫', category: 'cute', image: 'https://img95.699pic.com/photo/60041/9389.jpg_wh860.jpg', description: '软萌可爱的小猫咪' },
  { id: 4, name: '小企鹅', category: 'marine', image: 'https://img95.699pic.com/photo/60069/7426.jpg_wh860.jpg', description: '南极可爱的小精灵' }
])

// 导航到分类页面
const navigateToCategory = (categoryId) => {
  router.push({ path: `/animals/${categoryId}` })
}

// 导航到动物详情页
const navigateToAnimalDetail = (animalId) => {
  router.push({ path: `/animal/${animalId}` })
}
</script>

<template>
  <div class="animal-home">
    <!-- 可爱的页头 -->
    <header class="cute-header">
      <h1 class="main-title">🐾 萌宠乐园 🐾</h1>
      <p class="subtitle">探索可爱动物的奇妙世界</p>
    </header>

    <!-- 分类导航 -->
    <section class="categories-section">
      <h2 class="section-title">🐾 探索分类 🐾</h2>
      <div class="categories-grid">
        <div 
          v-for="category in categories" 
          :key="category.id"
          class="category-card"
          :style="{ backgroundColor: category.color }"
          @click="navigateToCategory(category.id)"
        >
          <div class="category-icon">{{ category.icon }}</div>
          <h3 class="category-name">{{ category.name }}</h3>
        </div>
      </div>
    </section>

    <!-- 推荐动物 -->
    <section class="featured-section">
      <h2 class="section-title">✨ 今日推荐 ✨</h2>
      <div class="featured-grid">
        <div 
          v-for="animal in featuredAnimals" 
          :key="animal.id"
          class="animal-card"
          @click="navigateToAnimalDetail(animal.id)"
        >
          <div class="animal-image-container">
            <img 
              :src="animal.image" 
              :alt="animal.name"
              class="animal-image"
              loading="lazy"
            />
          </div>
          <div class="animal-info">
            <h3 class="animal-name">{{ animal.name }}</h3>
            <p class="animal-description">{{ animal.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 互动区域 -->
    <section class="interaction-section">
      <div class="interaction-card">
        <h3 class="interaction-title">💌 加入我们的动物爱好者社区</h3>
        <p class="interaction-text">登录或注册以获取更多动物资讯和互动功能</p>
        <div class="interaction-buttons">
          <router-link to="/login" class="cute-button login-button">
            登录
          </router-link>
          <router-link to="/register" class="cute-button register-button">
            注册
          </router-link>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="cute-footer">
      <p>🐾 萌宠乐园 - 让我们一起爱护动物 🐾</p>
    </footer>
  </div>
</template>

<style scoped>
.animal-home {
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #fff5f7 0%, #fce4ec 100%);
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 可爱的页头 */
.cute-header {
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: 0 8px 20px rgba(255, 158, 170, 0.2);
}

.main-title {
  font-size: 2.5rem;
  color: #FF4081;
  margin-bottom: 10px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(255, 64, 129, 0.2);
}

.subtitle {
  font-size: 1.2rem;
  color: #FF80AB;
  font-weight: 500;
}

/* 分类部分 */
.categories-section {
  margin-bottom: 40px;
}

.section-title {
  text-align: center;
  font-size: 1.8rem;
  color: #FF4081;
  margin-bottom: 25px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(255, 64, 129, 0.2);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.category-card {
  padding: 25px 20px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  color: white;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.category-name {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 推荐动物部分 */
.featured-section {
  margin-bottom: 40px;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.animal-card {
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}

.animal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.animal-image-container {
  height: 200px;
  overflow: hidden;
}

.animal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.animal-card:hover .animal-image {
  transform: scale(1.05);
}

.animal-info {
  padding: 20px;
}

.animal-name {
  font-size: 1.4rem;
  color: #FF4081;
  margin-bottom: 10px;
  font-weight: bold;
}

.animal-description {
  color: #666;
  font-size: 0.95rem;
}

/* 互动区域 */
.interaction-section {
  margin-bottom: 40px;
}

.interaction-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(255, 158, 170, 0.2);
}

.interaction-title {
  font-size: 1.5rem;
  color: #FF4081;
  margin-bottom: 15px;
  font-weight: bold;
}

.interaction-text {
  color: #666;
  margin-bottom: 25px;
  font-size: 1.05rem;
}

.interaction-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.cute-button {
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.3s ease;
  text-decoration: none;
}

.login-button {
  background-color: #FF4081;
  color: white;
}

.login-button:hover {
  background-color: #F50057;
  transform: translateY(-2px);
}

.register-button {
  background-color: #B388FF;
  color: white;
}

.register-button:hover {
  background-color: #7C4DFF;
  transform: translateY(-2px);
}

/* 页脚 */
.cute-footer {
  text-align: center;
  padding: 20px;
  color: #FF80AB;
  font-size: 0.95rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .featured-grid {
    grid-template-columns: 1fr;
  }
  
  .interaction-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cute-button {
    width: 100%;
    max-width: 200px;
  }
}
</style>